﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>Globalization Demo</title>
    <link type="text/css" rel="Stylesheet" href="browser.css">
    <script src="../../lib/globalize.js"></script>
    <script src="../../lib/cultures/globalize.cultures.js"></script>
    <script src="jquery-1.4.4.js"></script>
    <script src="jquery.tmpl.js"></script>
    <script src="browser.js"></script>
    <script id="formattmpl" type="text/x-jquery-tmpl">
        <tr>
            <th>Number</th>
            {{each formats}}
            <th>{{=}}</th>
            {{/each}}
        </tr>
        {{each(i) numbers}}
        <tr class="result">
            <td>
                ${numbers[i]}
            </td>
            {{each(j) formats}}
            <td>
            {{demoFormat(i) j}}
            </td>
            {{/each}}
        </tr>
        {{/each}}
    </script>
    <script id="dateformattmpl" type="text/x-jquery-tmpl">
        <tr>
            <th>Date</th>
            {{each dateFormats}}
            <th>{{=}}</th>
            {{/each}}
        </tr>
        {{each(i) dates}}
        <tr class="result">
            <td>
				{{=}}
            </td>
            {{each(j) dateFormats}}
            <td>
            {{demoDateFormat(i) j}}
            </td>
            {{/each}}
        </tr>
        {{/each}}
    </script>
    <script id="infonumbertmpl" type="text/x-jquery-tmpl">
        <legend>Number Formatting</legend>
        <table class="info">
            <tr>
                <td>Pattern</td>
                <td>${pattern}</td>
                <td>Decimals</td>
                <td>${decimals} (${$data['.']})</td>
            </tr>
            <tr>
                <td>Grouping</td>
                <td>${$data[',']}</td>
                <td>Group Size</td>
                <td>${groupSizes}</td>
            </tr>
            <tr>
                <td>Positive</td>
                <td>${$data['+']}</td>
                <td>Negative</td>
                <td>${$data['-']}</td>
            </tr>
            <tr>
                <td colspan="4" align="center">Percent (symbol = ${percent.symbol})</td>
            </tr>
            <tr>
                <td>Pattern</td>
                <td>${percent.pattern}</td>
                <td>Decimals</td>
                <td>${percent.decimals} (${percent['.']})</td>
            </tr>
            <tr>
                <td>Grouping</td>
                <td>${percent[',']}</td>
                <td>Group Size</td>
                <td>${percent.groupSizes}</td>
            </tr>
            <tr>
                <td colspan="4" align="center">Currency (symbol = ${currency.symbol})</td>
            </tr>
            <tr>
                <td>Pattern</td>
                <td>${currency.pattern}</td>
                <td>Decimals</td>
                <td>${currency.decimals} (${currency['.']})</td>
            </tr>
            <tr>
                <td>Grouping</td>
                <td>${currency[',']}</td>
                <td>Group Size</td>
                <td>${currency.groupSizes}</td>
            </tr>
        </table>
    </script>
    <script id="infodatetmpl" type="text/x-jquery-tmpl">
        <legend>Date Formatting</legend>
        <table class="info">
            <tr>
                <td>Name</td>
                <td colspan="3">${name}</td>
            </tr>
            <tr>
                <td>AM</td>
                <td>${AM}</td>
                <td>PM</td>
                <td>${PM}</td>
            </tr>
            <tr>
                <td>Eras</td>
                <td colspan="3">
                    <ol>
                    {{each eras}}
                    <li>${name} (year offset ${offset})</li>
                    {{/each}}
                    </ol>
                </td>
            </tr>
            <tr>
                <td>Days</td>
                <td colspan="3">
                    <ol>
                        {{each days.names}}
                        <li>{{=}}</li>
                        {{/each}}
                    </ol>
                </td>
            </tr>
            <tr>
                <td>Days (abbreviated)</td>
                <td colspan="3">
                    <ol>
                        {{each days.namesAbbr}}
                        <li>{{=}}</li>
                        {{/each}}
                    </ol>
                </td>
            </tr>
            <tr>
                <td>Days (shortest)</td>
                <td colspan="3">
                    <ol>
                        {{each days.namesShort}}
                        <li>{{=}}</li>
                        {{/each}}
                    </ol>
                </td>
            </tr>
            <tr>
                <td>Months</td>
                <td colspan="3">
                    <ol>
                        {{each months.names}}
                        <li>{{=}}</li>
                        {{/each}}
                    </ol>
                </td>
            </tr>
            <tr>
                <td>Months (abbreviated)</td>
                <td colspan="3">
                    <ol>
                        {{each months.namesAbbr}}
                        <li>{{=}}</li>
                        {{/each}}
                    </ol>
                </td>
            </tr>
            {{if typeof monthsGenitive !== 'undefined'}}
            <tr>
                <td>Months (Genitive)</td>
                <td>${monthsGenitive.names}</td>
                <td>Months (Abbr. Gen.)</td>
                <td>${monthsGenitive.namesAbbr}</td>
            </tr>
            {{/if}}
            <tr>
                <td align="center" colspan="4">Patterns</td>
            </tr>
            {{each(n,v) patterns}}
            <tr>
                <td>${n}</td>
                <td colspan="3">{{=}}</td>
            </tr>
            {{/each}}
        </table>
    </script>
</head>

<body>
<div id="intro">
This is a demo of the Globalize library. You can follow the discussion and provide feedback on the planning page, here:
<br/><a href="http://wiki.jqueryui.com/Globalization">Globalization wiki page</a>
<br/>
And you can view the source from here or keep up to date with it on github, here:
<br/><a href="https://github.com/jquery/globalize/">Globalize on GitHub</a>
</div>

<div>
    Culture:
    <select id="cultures"></select>
</div>
<div>
    Calendar:
    <select id="calendars"></select>
</div>

<div class="pane">
    <span class="tab active" id="dates">Dates</span>
    <span class="tab inactive" id="numbers">Numbers</span>
    <span class="tab inactive" id="info">Info</span>

    <div id="datescontent" class="active">
        <table id="dateformat" class="results">
        </table>
        <b>Parsing:</b> Type a date in one of the culture formats:
        <input id="parseDate" type="text" /><span id="parseDateResult"></span>
    </div>

    <div id="numberscontent" class="inactive">
        <table id="format" class="results">
        </table>
        <b>Parsing:</b> Type a number using the culture group and decimal separators:
        <input id="parseNumber" type="text" /><span id="parseNumberResult"></span>
    </div>

    <div id="infocontent" class="inactive">
        <p>
            Name (in English) "<span id="englishName"></span>"<br />
            Name (in Native Language) "<span id="nativeName"></span>".<br />
            Is RTL culture? <span id="isRTL"></span>.
        </p>
        <fieldset id="infonumber" class="info">
        </fieldset>
        <fieldset id="infodate" class="info">
        </fieldset>
    </div>

</div>

<div class="pane">

Interesting cultures to preview:
<ul>
    <li>ja-JP: Has an optional calendar that has 4 different eras.</li>
    <li>th-TH: Standard calendar has a year offset.</li>
    <li>te-IN: Numbers have unequal groupings.</li>
    <li>ar-SA: Standard calendar is UmAlQura, a non-gregorian based calendar that requires custom conversion logic.
    It also supports the Hijri calendar, and a standard gregorian calendar translated into one of <i>4 languages</i>.
    </li>
</ul>

</div>

</body>
</html>
